import React, { Component } from 'react'
import myaxios from "../../utils/myaxios";
import { NavBar, WingBlank, Icon, Carousel, Toast } from "antd-mobile";
import "./GoodDetail.scss";

export default class goodDetail extends Component {

    state = {
        goodInfo: {},
        imgHeight: '6.666667rem',
        /* 设置轮播图是否显示 默认情况不显示 */
        showSwiper: false,
        showCollect: false,
    };


    componentDidMount() {
        // 获取商品id
        let { goods_id } = this.props.match.params

        myaxios.get('goods/detail', {
            params: {
                goods_id,
            },
        }).then((res) => {
            this.setState({
                goodInfo: res,
                showSwiper: true
            })
        }).catch((err) => console.log(err));
    }
    // 收藏功能
    handleCollect = () => {
        // 是否收藏的数组集合
        let collections_str = localStorage.getItem('collections');
        let collections = JSON.parse(collections_str || "[]")
        // 判断是否已经收藏
        let index = collections.findIndex((val) => {
            return val.goods_id = this.state.goodInfo.goods_id
        }
        )
        // 未找到时index为-1,其余皆为找到
        // 发现已收藏,则取消收藏
        if (index !== -1) {
            collections.splice(index, 1)
            Toast.info('取消收藏成功', 1)
            this.setState({
                showCollect: false
            })
        } else {
            Toast.info('收藏成功!', 1)
            collections.push(this.state.goodInfo)
            this.setState({
                showCollect: true
            })
        }
        // 更新localStorage里的数据
        localStorage.setItem("collections", JSON.stringify(collections));
    }

    // 添加购物车
    addToCart = (params) => {
        // 从本地缓存中获取购物车数据
        let carts_str = localStorage.getItem("carts");
        console.log('carts_str', carts_str)
        let carts = JSON.parse(carts_str || "[]");
        console.log(carts)
        // 获取货品id
        let { goods_id } = this.props.match.params;
        console.log(goods_id)
        let index = carts.findIndex((val) => {
            return val.goods_id = goods_id
        })
        // index === -1 则代表未找到
        if (index === -1) {
            let goods_info = this.state.goodInfo;
            goods_info.num = 1;
            goods_info.checked = true;
            carts.push(goods_info)
        } else {
            carts[index].num++
        }
        Toast.info("加入购物车成功", 1);
        localStorage.setItem('carts', JSON.stringify(carts));
    }

    // 跳转到购物车列表
    gotoCart = () => {
        this.props.history.push("/cart")
    }

    //立即购买
    pay = () => {
        this.props.history.push("/pay");
    }
    render() {
        return (
            <div className='yg_detail'>
                {/* 导航条部分开始 */}
                <NavBar
                    className="yg_detail_nav"
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={() => window.history.go(-1)}
                >
                    商品详情
                </NavBar>
                {/* 导航条部分结束 */}

                {/* 轮播图开始 */}
                <div className='yg_swiper'>
                    <WingBlank>
                        <Carousel
                            autoplay={true}
                            infinite
                        >
                            {this.state.goodInfo.pics && this.state.goodInfo.pics.map(val => (
                                <div
                                    key={val.goods_id}
                                    style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                                >
                                    <img
                                        src={val.pics_mid}
                                        alt=""
                                        style={{ width: '100%', height: '100%', verticalAlign: 'top' }}
                                        onLoad={() => {
                                            // fire window resize event to change height
                                            window.dispatchEvent(new Event('resize'));
                                            this.setState({ imgHeight: this.state.imgHeight });
                                        }}
                                    />
                                </div>
                            ))}
                        </Carousel>
                    </WingBlank>
                </div>
                {/* 轮播图结束 */}

                {/* 价格和分享区域开始 */}
                <div className="yg-detail-price">
                    <div className="price-left">
                        <span className="title1">￥{this.state.goodInfo.goods_price}</span>
                    </div>
                    <div className="price-right">
                        <i className="iconfont icon-fenxiang"></i>
                        <i className={this.state.showCollect ? "iconfont icon-shoucang active" : "iconfont icon-shoucang"} onClick={this.handleCollect}></i>
                    </div>
                </div>
                {/* 价格和分享区域结束 */}
                {/* 商品的标题的开始 */}
                <div className="yg-detail-title">{this.state.goodInfo.goods_name}</div>
                {/* 商品的标题的结束 */}

                {/* 图文详情开始 */}
                <div className="yg-detail-richtext">
                    <div className="richtext-title">图文详情</div>
                    <div className="richtext-content"
                        dangerouslySetInnerHTML={{ __html: this.state.goodInfo.goods_introduce }}
                    >
                    </div>
                </div>
                {/* 图文详情结束 */}

                {/* 底部的工具栏开始 */}
                <div className="yg-detail-bottom">
                    <div className="bottom-contact">
                        <i className="iconfont icon-lianxikefu"></i>
                        <div className="title">联系客服</div>
                    </div>
                    <div className="bottom-cart" onClick={this.gotoCart}>
                        <i className="iconfont icon-gouwuche"></i>
                        <div className="title">购物车</div>
                    </div>
                    <div className="bottom-addToCart" onClick={this.addToCart}>
                        <span className="title1">加入购物车</span>
                    </div>
                    <div className="bottom-buy" onClick={this.pay}>
                        <span className="title2">立即购买</span>
                    </div>

                </div>

                {/* 底部的工具栏结束 */}
            </div>
        )
    }
}
